<script setup>
import { ref } from 'vue'

const btnName = ref("获取验证码")
const btnDis = ref(false)

var countdown = 60; // 倒计时时间

function btnClick() {
    if (countdown == 60) { // 只有在倒计时时间为 60 秒时才能发送验证码
        btnDis.value = true; // 禁用按钮
        btnName.value = countdown + "s重新发送"// 显示倒计时时间
        var timer = setInterval(function () {
            countdown--;
            btnName.value = countdown + "s重新发送";
            if (countdown == 0) {
                clearInterval(timer); // 清除计时器
                btnDis.value = false; // 恢复按钮可用状态
                btnName.value = "获取验证码";
                countdown = 60; // 重置倒计时时间
            }
        }, 1000);
    }
};
</script>

<template>
    <button @click="btnClick();$emit('clickEvent')" :disabled="btnDis" :class="{disabled:btnDis}">{{btnName}}</button>
</template>

<style scoped>
button {
    width: 100%;
    height: 100%;
    border: 1px solid #d6d6d6;
    color: #757474;
    font-size: 12px;
    background-color: transparent;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button:hover {
    color: #1a1919;
}
</style>